<!DOCTYPE html>
<html>
<!-- -->,
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<title>全部订单</title>

	<link href="css/admin.css" rel="stylesheet" type="text/css">
	<link href="css/amazeui.css" rel="stylesheet" type="text/css">
	<link href="css/personal.css" rel="stylesheet" type="text/css">
	<link href="css/bilstyle.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="css/center.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	<script src="js/common.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/amazeui.js"></script>
	<link href="css/admin.css" rel="stylesheet" type="text/css">
	<link href="css/amazeui.css" rel="stylesheet" type="text/css">
	<link href="css/personal.css" rel="stylesheet" type="text/css">
	<link href="css/infstyle.css" rel="stylesheet" type="text/css">
	<link href="css/lostyle.css" rel="stylesheet" type="text/css">
	<link href="css/layui.css" rel="stylesheet" type="text/css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/amazeui.js" type="text/javascript"></script>

	<script src="js/common.js"></script>

</head>

<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<div id="app">
	<top></top>
	<bar></bar>
	<b class="line"></b>
	<!-------------------------------------- 头部结束 -------------------------------------->

	<!-------------------------------------- 内容开始 -------------------------------------->

	<div class="center" >
		<div class="col-main" >
			<div class="main-wrap" v-if="all">
				<!--------------------------------------标题开始 -------------------------------------->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">全部订单</strong> / <small>all billils</small></div>
				</div>
				<hr>
				<!-------------------------------------- 标题结束 -------------------------------------->
				<!---------------------------------------订单-时间-开始---------------------------------->
				<div class="order-time">
					<label class="form-label">完成时间：</label>
					<div class="show-input">
						<select class="am-selected" >

							<option value="today">今天</option>
							<option value="sevenDays" selected="">最近一周</option>
							<option value="oneMonth">最近一个月</option>
							<option value="threeMonths">最近三个月</option>

						</select>
					</div>
					<div class="clear"></div>
				</div>

				<table width="100%">

					<!---------------------------------------订单-时间-结束---------------------------------->

					<!---------------------------------------订单-顶部标签-开始------------------------------->
					<thead>
					<tr>
						<th class="memo">订单状态</th>

						<th class="time">订单开始时间</th>

						<th class="name">订单地址</th>

						<th class="amount">订单金额</th>

						<th class="action">操作</th>

					</tr>
					</thead>

					<hr>
					<!---------------------------------------订单-顶部标签-结束------------------------------->

					<tbody>
					<!---------------------------------------订单-顶部循环表单-------------------------------->
					<tr v-for="order,index in orders">

						<!---------------------------------------订单图片（固定）---------------------------------->


						<td class="amount"  >
							<center>{{order.state.stateValue}}</center>
						</td>

						<!---------------------------------------订单时间--------------------------------------->
						<td class="time">
							<p>
								{{order.appointmentStartTime}}


							</p>
							<p class="text-muted"> 10:58
							</p>
						</td>
						<!---------------------------------------订单地址--------------------------------------->
						<td class="title name">
							<p class="content">
								{{order.heatingNumberObject.address}}
							</p>
						</td>
						<!---------------------------------------订单金额--------------------------------------->
						<td class="title name">
							<p class="content">
								{{order.ordersPrice}}
							</p>
						</td>
						<!---------------------------------------订单操作--------------------------------------->
						<td class="operation">
							<a   @click="information(order.id)" >详情</a>
						</td>
						<td class="operation">
							<button @click="update(order.id)">修改</button>
						</td>

					</tr>


					</tbody>




				</table>


				<div class="fanyefh_m" >
					<a href="#">上一页</a>
					<font v-for="i in pageInfo.pages" @click.prevent="initData(i)">
						<a href="#" class="addclass_m">{{i}}</a>
					</font>
					<a href="#">下一页</a>
				</div>

			</div>
			<div class="main-wrap" v-if="upd">
				<!--------------------------------------标题开始 -------------------------------------->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">修改订单</strong> / <small>all billils</small></div>
				</div>
				<div class="package-status">
					<ul class="status-list">
						<li>
							<p class="text">{{orderUpd.id}}</p>
							<div class="time-list">
								<span class="time">订单编号</span>
							</div>
						</li>
						<li>
							<p class="text">{{orderUpd.state.stateValue}}</p>
							<div class="time-list">
								<span class="time">订单状态：</span>
							</div>
						</li>
						<li>
							<p class="text">{{orderUpd.workers.name}}</p>
							<div class="time-list">
								<span class="time">维修人员：</span>
							</div>
						</li>
						<li class="latest">
							<p class="text">{{orderUpd.address.detail}}</p>
							<div class="time-list">
								<span class="time">客户地址：</span>
							</div>
						</li>
						<li class="latest">
							<p class="text">{{orderUpd.phone}}</p>
							<div class="time-list">
								<span class="time">手机号码：</span>
							</div>
						</li>
						<li>
							<p class="text">
								<input type="text" value="" v-model.trim="orderUpd.orderTime"></input>
							</p>
							<div class="time-list">
								<span class="time">下单时间：</span>
							</div>
						</li>
						<li>
							<p class="text">{{orderUpd.faultDescription}}</p>
							<div class="time-list">
								<span class="time">维修类型：</span>
							</div>
						</li>
						<li>
							<p class="text">{{orderUpd.repairTime}}</p>
							<div class="time-list">
								<span class="time">维修时长：</span>
							</div>
						</li>
						<li>
							<p class="text">{{orderUpd.finishTime}}</p>
							<div class="time-list">
								<span class="time">结束时间：</span>
							</div>
						</li>
						<li>
							<p class="text" v-for="materialsUse,index in orderUpd.materialsUses">

								{{materialsUse.materialsName.title}}
							</p>
							<div class="time-list">
								<span class="time">使用耗材：</span>
							</div>
						</li>
						<li>
							<p class="text">
								{{orderUpd.materialsPrice}}

							</p>
							<div class="time-list">
								<span class="time">耗材明细：</span>
							</div>
						</li>
						<li>
							<p class="text">

								<input type="text" value="" v-model.trim="orderUpd.faultType.title"></input>
							</p>
							<div class="time-list">
								<span class="time">故障描述</span>
							</div>
						</li>
						<li>
							<p input="text">{{orderUpd.finishTime}}</p>
							<div class="time-list">
								<span class="time">结束时间：</span>
							</div>
						</li>
						<!--点击返回上一页面-->
						<button type="button" class="layui-btn layui-btn-lg" @Click="ret">点击返回</button>
						<div class="time-list" >
							<button type="button" class="layui-btn layui-btn-lg" @Click="save">确认修改</button>
						</div>
					</ul>
				</div>




			</div>

			<!-------------------------------------- 内容结束 -------------------------------------->
			<!-------------------------------------- 尾部开始 -------------------------------------->

		</div>
		<!-------------------------------------- 尾部结束 -------------------------------------->

		<!-------------------------------------- 侧边导航栏开始 -------------------------------------->
		<ban></ban>
		</aside>
	</div>
</div>
<!-------------------------------------- 侧边导航栏结束 -------------------------------------->
</body>
</html>



<script>

	var app = new Vue({
		el:"#app",
		data:{
			pageSize:5,
			admin:{},
			message:'',
			orders:[],
			pageInfo:{},
			time:"",
			id:0,
			upd:false,
			all:true,
			orderUpd:{},
			materialsUse:{materialsName:{title:""}},
			tit: ""
		},
		created:function (){
			this.initData(1);
		},
		methods:{
			initData:function (pageNum){
				axios.post("http://localhost:8080/worker/billist?pageNum="+pageNum+"&pageSize="+this.pageSize+"&id="+2
				).then(res=>{

					this.pageInfo=res.data.data;
					this.orders=res.data.data.list;


				})
				;
			},
			information:function (id){
				location.href="detailed.html?id="+id;
			},
			update:function (id){
				this.upd=true;
				this.all=false;
				console.log(id);
				axios.post("http://localhost:8080/worker/detailed?id="+id)
						.then(res=>{
							console.log(res.data.data);
							this.orderUpd=res.data.data;

						})
			},
			save:function (){
				this.title=this.orderUpd.faultType.title;
				axios.post("http://localhost:8080/worker/upd?title=",this.orderUpd).
				then(res=>{
					alert(res.data.message);
				})
			},
			ret:function (){
				this.upd=false;
				this.all=true;
			}


		}




	});
</script>


